<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="top">
        Checkout
    </ui:define>

    <ui:define name="left">
    </ui:define>



    <ui:define name="body">
        <c:choose>
            <c:when test="#{cartCTRL.order.isEmpty}">
                Your cart is empty!
            </c:when>
            <c:otherwise>
                <h:outputText value="Your Cart" style="font-weight: bold;"/>
                <h:form>
                    <h:dataTable width="100%" value="#{cartCTRL.order.orderLinksList}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px; font-size: 10px;">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Name"/>
                            </f:facet>
                            <h:outputText value="#{item.item.name}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Description"/>
                            </f:facet>
                            <h:outputText value="#{item.item.descrip}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Quantity"/>
                            </f:facet>
                            <h:outputText value="#{item.quantity}"/>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText value="Price"/>
                            </f:facet>
                            <h:outputText value="\$#{item.item.price}"/>
                        </h:column>
                    </h:dataTable>           


                    <h:panelGrid columns="3" border="0">
                        <h:outputLabel value="Credit Card #:" for="creditcard"/>
                        <h:inputText binding="#{creditcard}" validatorMessage="Invalid card number. Ex 1234-5678-0000-0000" value="#{userCTRL.user.creditCard}" id="creditcard">
                            <f:validateRegex pattern="([0-9]{4}-?){3}[0-9]{4}"/>
                        </h:inputText>
                        <h:message for="creditcard"/>
                        <h:outputLabel value="Expiration:" for="expire"/>
                        <h:inputText validatorMessage="Invalid expiration date. Ex: 11/13" id="expire">
                            <f:validateRegex pattern="[0-9]{2}/[0-9]{2}"/>
                        </h:inputText>
                        <h:message for="expire"/>
                    </h:panelGrid>
                    <h:panelGrid columns="2" border="0">
                        <h:outputText value="Total: \$#{cartCTRL.order.amount}"/>
                        <h:commandButton action="#{cartCTRL.submitPayment}" value="Submit Payment"/>


                    </h:panelGrid>
                </h:form>
            </c:otherwise>
        </c:choose>
        
        <h:form>
            <h:link outcome="ManageCart" value="Manage Cart"/>
        </h:form>
    </ui:define>

</ui:composition>
